<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p v-show="age>=18">成年</p>
				<p v-show="age<18">未成年</p>
				
				<p v-if="age>=18">成年</p>
				<p v-if="age<18">未成年</p>
			<!--v-show不管条件是否成立，数据都在页面上，只是false，
			被样式隐藏了。
			v-if是真的不存在。vue非常细致，
			v-show如果判断非常频繁性能高于v-if-->
			
			<p v-if="salary<=10">普通阶层</p>
			<p v-else-if="salary<=500">中产阶层</p>
			<p v-if="salary>500">富豪阶层</p>
			
			<hr ><!--类似 java中foreach循环,in后面就是集合
			o代表每次遍历的当前值,i代表当前索引值，注意顺序，Vue定死顺序-->
			<p v-for="o in hobby">{{o}}</p>
			<p v-for="o,i in hobby">{{i}}-{{o}}</p>
			
			<hr >
			<button v-on:click="show()">点我</button>
			<button v-on:click="show">点我</button>
			<button @click="show()">点我</button>
			
			<hr >
			
			<!--插值表达式不能用作属性，值未解析-->
			 <a v-bind:href="site.url">{{site.name}}</a>
			 <a :href="site.url">{{site.name}}</a>
			 <!--v-bind指令，把后面内容就不是普通字符串，而是vue变量-->
			
			
			<!--v-text指令它纯文本输出，v-html翻译html标签
			div.innerText,div.innerHTML
			-->
			<p v-text="sysname"></p>
			<p v-html="sysname"></p>
		
		</div>
	</body>
	<script>
		new Vue({
			el:"#app",
			data:{
				sysname:"<b>京淘</b>电商平台",//b标签是加粗的意思
				
				age:18,
				salary:9,
				hobby:["篮球","football","badminton"],
				site:{
					name:"java培优官网",
					url:"http://act.codeboy.com"
				}
			},
			methods:{
				show:function(){
					console.log("show method");
				}
			}
		});
	</script>
</html>
